<form class="form-horizontal form-confirm" id="form-add"
      action="{% url 'systems:user_add' %}" method="post">

    <input type="hidden" id="id" name="id" value="{{ h_obj.id }}"/>

    <div class="form-group">
        <label class="control-label col-md-3">用户名</label>
        <div class="col-md-7">
            <input type="text" name="username" value="{{ h_obj.username }}"
                   class="form-control username" placeholder="仅限20个汉字以内"/>
        </div>
        <h4 class="col-md-1" style="color: red;">*</h4>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">姓名</label>
        <div class="col-md-7">
            <input type="text" name="name" value="{{ h_obj.name }}"
                   class="form-control" placeholder="仅限20个汉字以内"/>
        </div>
        <h4 class="col-md-1" style="color: red;">*</h4>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">性别</label>
        <div class="col-md-7">
            <label class="lyear-radio radio-inline radio-primary">
                <input type="radio" name="gender" value="1" checked=""><span>男</span>
            </label>
            <label class="lyear-radio radio-inline radio-primary">
                <input type="radio" name="gender" value="0"><span>女</span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">部门</label>
        <div class="col-md-7">
            <select class="form-control select2 w-100" name="dept">
                <option></option>

                {{ h_depts|safe }}

            </select>
        </div>
        <h4 class="col-md-1" style="color: red;">*</h4>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">手机号码</label>
        <div class="col-md-7">
            <input type="text" name="mobile" value="{{ h_obj.mobile|default_if_none:'' }}"
                   class="form-control" placeholder="仅限12个数字以内，区号用 - 隔开"/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">邮箱</label>
        <div class="col-md-7">
            <input type="text" name="email" value="{{ h_obj.email }}"
                   class="form-control" placeholder=""/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">工号</label>
        <div class="col-md-7">
            <input type="text" name="job_no" value="{{ h_obj.job_no|default_if_none:'' }}"
                   class="form-control" placeholder=""/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">角色</label>
        <div class="col-md-7">
            <select class="form-control select2 w-100" name="role" multiple="multiple" data-placeholder="可选择多个角色">
                {% for obj in h_roles %}
                    {% if obj in h_user_roles %}
                        <option selected value="{{ obj.id }}">{{obj.name}}</option>
                    {% else %}
                        <option value="{{ obj.id }}">{{obj.name}}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        <h4 class="col-md-1" style="color: red;">*</h4>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">状态</label>
        <div class="col-md-7">
            <label class="lyear-radio radio-inline radio-success">
                <input type="radio" name="is_active" value="True"
                       {% ifequal h_obj.is_active 0 %} {% else %} checked="" {% endifequal %}><span>启用</span>
            </label>
            <label class="lyear-radio radio-inline radio-danger">
                <input type="radio" name="is_active" value="False"
                       {% ifequal h_obj.is_active 0 %} checked="" {% endifequal %}><span>禁用</span>
            </label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">头像</label>
        <div class="col-md-7">
            <input type="file" name="file" id="file" accept=".png">
        </div>
        <div class="col-md-2">
            <img src="/static/images/avatar/{{ h_obj.avatar }}" class="img-avatar-36"/>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">备注</label>
        <div class="col-md-7">
            <textarea name="description" style="height: 76px"
                      class="form-control" placeholder="仅限120个汉字以内">{{ h_obj.description|default_if_none:'' }}</textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3">数据归属部门</label>
        <div class="col-md-7">
            <select class="form-control select2 w-100" name="dept_belong_id">
                <option></option>

                {{ h_dept_belongs|safe }}

            </select>
        </div>
    </div>
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        数据归属部门不填，则默认为当前创建用户的部门ID
    </div>

    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        新增用户的默认密码是 123456
    </div>

    {% csrf_token %}
</form>

<script>
    $(function() {
        // 初始化Select2
        $(".select2").select2();

        // 使用模态框弹出本页面时需增加如下：
        // $(".select2-selection__rendered").on("click",function(e){
        //     setTimeout("$('.select2-container.select2-container--default.select2-container--open').addClass('modal');",100);
        // });
    })
</script>